<div x-data="{
    disabled: false,
    max_stars: 5,
    stars: 0,
    value: 0,
    hoverStar(star){
        if (this.disabled) {
            return;
        }

        this.stars = star; 
    },
    mouseLeftStar(){
        if (this.disabled) {
            return;
        }
    
        this.stars = this.value;
    },
    rate(star){
        if (this.disabled) {
            return;
        }

        this.stars = star;
        this.value = star;

        $refs.rated.classList.remove('opacity-0');
        setTimeout(function(){
            $refs.rated.classList.add('opacity-0');
        }, 2000);
    },
    reset(){
        if (this.disabled) {
            return;
        }

        this.value = 0;
        this.stars = 0;
    }
}" x-init="this.stars = this.value">
<div class="relative flex items-center w-auto mx-auto jusitfy-center">
    <div x-ref="rated" class="absolute pl-1 -mt-2 text-sm text-pink-500 duration-300 ease-out -translate-y-full opacity-0">Rated <span x-text="value"></span></div>
    <ul class="flex">
        <template x-for="star in max_stars">
            <li @mouseover="hoverStar(star)" @mouseleave="mouseLeftStar" @click="rate(star)" class="px-1 cursor-pointer" :class="{ 'text-gray-400 cursor-not-allowed': disabled}">
                <svg x-show="star > stars" class="w-6 h-6 text-pink-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                <svg x-show="star <= stars" class="w-6 h-6 text-pink-600 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" opacity="0.2"/><path d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
            </li>
        </template>
    </ul>
    <button x-show="value" @click="reset" class="absolute right-0 inline-flex items-center justify-center w-5 h-5 -mr-1 text-xs text-pink-600 translate-x-full bg-pink-100 rounded-full hover:bg-pink-400 hover:text-white">
        <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
    </button>
</div>
</div>
